<template>
  <div v-click-outside>
    <!-- <DatePick v-model="now"/>父组件使用 v-model 等于 :value="now" @input="val =>value=val" -->
    <input type="text" :value="comValue">
    <div class="pannel" v-if="isVisible">
      <div class="pannel-nav">
        <span @click="preveYear">&lt;</span>
        <span @click="preveMonth">&lt;&lt;</span>
        <span>{{time.yy}}年</span>
        <span>{{time.mm+1}}月</span>
        <span @click="nextMonth">&gt;&gt;</span>
        <span @click="nextYear">&gt;</span>
      </div>
      <div class="pannel-content">
        <!-- 直接列出一个6*7一个列表 99乘法表 -->
        <!-- 判断是不是当月，不是当月就变灰色 -->
        <!-- 选择日期@click="chooseDate(visibeDays[(i-1)*7 + (j-1)])" -->
        <div>
          <span v-for="k in weeks" :key="k">
            {{k}}
          </span>
        </div>
        <div v-for="i in 6" :key="i">
          <span @click="chooseDate(visibeDays[(i-1)*7 + (j-1)])" class="cell" v-for="j in 7" :key="j" :class="[
          {huise:!isCurrentMonth(visibeDays[(i-1)*7 + (j-1)])},
          {hongse:isCurrentDay(visibeDays[(i-1)*7 + (j-1)])}
          ]">
            {{visibeDays[(i-1)*7 + (j-1)].getDate()}}
          </span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    let {yy,mm} = this.getYearMonthDay(this.value)
    return {    
      isVisible: false,
      weeks:[
        '日','一','二','三','四','五','六'
      ],
      time:{yy, mm}
    }
  },
  props:{
    value:{
      type: Date,
      default:() => {
        return new Date()
      }
    }
  },
  directives: {
    clickOutside: {//指令的生命周期会触发两次，一次加载，一次绑定
      bind(el, bindings, vnode) {//context
        //把事件绑定给document上，看一下点击的是否是当前这个元素内部
        let handler = (e) => {
          if(el.contains(e.target)){
            if(!vnode.context.isVisible){
              vnode.context.focus()
              // console.log('包含')
            }

          }else {
            if(vnode.context.isVisible){
              vnode.context.blur()
              // console.log('不包含');  
            }
          }
        }
        //事件委托
        el.handler = handler
        document.addEventListener('click', handler)
      },
      unbind(el){
        document.removeEventListener('click', el.handler)
      }
    }
  },
  mounted() {
    // console.log(this.visibeDays);
    
  },
  computed: {
    comValue () {
      let yy = this.value.getFullYear()
      let mm = this.value.getMonth()+1
      let dd = this.value.getDate();
      return `${yy}-${mm}-${dd}`
    },
    visibeDays () {
      //先获取当前是周几
      // console.log(this.comValue);
      
      let {yy, mm} = this.getYearMonthDay(this.getDate(this.time.yy,this.time.mm,1))
      //获取到当前月份的第一天
      let firstDay = this.getDate(yy,mm,1)
      //生成一个当前 如：2019 5 18   2019 5 1

      //获取当前是周几  把天数往前移动几天
      let week = firstDay.getDay()
      //当前开始的天数
      let startDay = firstDay - week*24*60*60*1000
      
      //循环42天,i*24*60*60*1000加上多少天
      let arr = [];
      for(let i = 0; i<42; i++){
        arr.push(new Date(startDay+i*24*60*60*1000))
      }
      return arr
    } 
  },
  methods: {
    focus () {
      this.isVisible=true
    },
    blur () {
      this.isVisible=false
    },
    getYearMonthDay (date) {
      let yy = date.getFullYear()
      let mm = date.getMonth()
      let dd = date.getDate()
      return {yy, mm, dd}
    },
    getDate (yy, mm, dd) {
      return new Date (yy,mm,dd)
    },
    isCurrentMonth(date){
      //他是不是当月的 this.value
      //我知道当前用户传入的值 2018 5 18 2018 4 28 、 2018 6 8
      let {yy, mm} = this.getYearMonthDay(this.getDate(this.time.yy, this.time.mm, 1))
      let {yy:y, mm:m} = this.getYearMonthDay(date)
      return yy === y && mm === m;
    },
    //判断是不是今天
    isCurrentDay(date) {
      let {yy, mm, dd} = this.getYearMonthDay(new Date())
      let {yy:y, mm:m, dd:d} = this.getYearMonthDay(date)
      return yy === y && mm === m && dd === d;
    },
    //选择日期
    chooseDate (date) {
      this.time = this.getYearMonthDay(date)
      this.$emit('input', date)
      this.blur()
    },
    //是否选中
    iSselected (date) {
      let {yy, mm, dd} = this.getYearMonthDay(new Date())
      let {yy:y, mm:m, dd:d} = this.getYearMonthDay(date)
      return yy === y && mm === m && dd === d;
    },
    //向上一个月
    preveMonth () {
      //获取当前年月的一个日期
      let d = this.getDate(this.time.yy, this.time.mm, 1)
      d.setMonth(d.getMonth()-1)
      this.time = this.getYearMonthDay(d)
    },
    //向下一个月
    nextMonth () {
      let d = this.getDate(this.time.yy, this.time.mm, 1)
      d.setMonth(d.getMonth()+1)
      this.time = this.getYearMonthDay(d)
    },
    //向上一年
    preveYear () {
      let d = this.getDate(this.time.yy, this.time.mm, 1)
      d.setYear(d.getFullYear()-1)
      this.time = this.getYearMonthDay(d)
    },
    nextYear () {
      let d = this.getDate(this.time.yy, this.time.mm, 1)
      d.setYear(d.getFullYear()+1)
      this.time = this.getYearMonthDay(d)
    }
  }
}
</script>
<style scoped>
.pannel {
  position: absolute;
  border: 1px solid pink;
  padding-left: 20px;
  font-size: 12px;

}
.pannel-nav{
  padding: 0 10px 0 0;
}
.pannel-nav{
  display: flex;
  justify-content: space-around;
}
.pannel-content{
 box-sizing: border-box;
}
.pannel-content span {
  display:inline-block;
  box-sizing: border-box;
  text-align: center;
  width: 32px;
  height: 32px;
  line-height: 32px;
}
.huise {
  color: #c6c6c6;
}
.cell {
  box-sizing: border-box;
}
.cell:hover{
  background-color: pink;
  color: #ffffff;
}
.hongse {
  border-radius: 5px;
  background-color: red;
  color: #fff;
}
</style>